<template>
<div class="scgz">
    <Head/>
    <div style="padding-top:60px;">
        <el-row>
            <el-col :span="15" :xs="24" class="yd-Header">
                <div class="grid-content bg-purple">
                    <el-col :span="24" :xs="24"><ConterH/></el-col>
                    <el-col :span="24" :xs="24" class="contR"><ConterL3/></el-col>
                </div>
            </el-col>
            <el-col :span="8" :xs="8"><div class="grid-content bg-purple-light hidden-xs-only">
                <ConterR></ConterR>
                </div>
            </el-col>
        </el-row>
    </div>
    <div class="Goback hiddem-xs-only">
        <li class="hidden-sm-and-up yd-fanhui" :class="{'actives':index === isActives}" @click="changeTabs(index)">
            <router-link to="/yd-wode"><p><i class="el-icon-back"></i></p></router-link></li>
    </div>
</div>
</template>
<script>
    import Head from '../Head'
import ConterH from './conter-H'
import ConterL3 from './conter-L3'
import ConterR from './conter-R'
export default {
    name:'app',
    methods:{
        changeTabs(index){
            this.isActives=index;
        }
    },
    components:{
        Head,
        ConterH,
        ConterR,
        ConterL3,
    }
    
}
</script>
<style scoped>

    .scgz{
        margin-left: 20%;
        width: 60%;
    }
    .actives{
        background-color: #f0f0f0;
        color: #ff4f4c;
    }
    .Goback li{
        text-align: center;
        line-height: 50px;
        position: fixed;
        bottom: 30px;
        left: 30px;
        background-color: #b3b3b3;
        width: 50px;
        height: 50px;
        border-radius: 8px;
        font-size: 35px;
        opacity:0.5;
    }
    .Goback li i{
        color: #fff;
    }
    @media screen and (max-width: 750px){
        .scgz{
            margin-bottom: 50px !important;
        }
        .scgz{
            width: 100%;
            margin-left: 0;
        }
        .yd-Header{
            /*padding: 0 !important;*/
        }
        .contR{
            margin-top: 30px;
        }
    }

 
</style>


